<?php

use kartik\file\FileInput;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;

\app\assets\AdminUpload::register($this);
?>
<?php
$imgUrl = Yii::$app->request->get('imgUrl')?:'';
$movUrl = Yii::$app->request->get('movUrl')?:'';
$index = Yii::$app->request->get('index')?:0;
$imgUrl = base64_decode($imgUrl);
$movUrl = base64_decode($movUrl);
$this->beginPage();
?>
<!DOCTYPE html>
<html lang="<?php echo Yii::$app->language; ?>">
<head>
    <?php
    $this->registerMetaTag(["name" => "viewport", "content" => "width=device-width, initial-scale=1.0"]);
    $this->registerMetaTag(["http-equiv" => "Content-type", "content" => "text/html;charset=utf-8"]);
    $this->head();
    ?>
</head>
<style>
    .main{
        height: 35px;
    }
    .div-upload-desc{
        position: absolute;
        width: 80px;
        height: 35px;
        text-align: right;
    }
    .div-upload-desc div{
        position: relative;
        bottom: -10px;
    }
    .div-upload{
        position: absolute;
        width: 300px;
    }
    .media-opt-rm{
        text-align: center;
        cursor:pointer;
        cursor:hand;
    }
    .media-opt-up{
        text-align: center;
        cursor:pointer;
        cursor:hand;
    }
</style>
<body>
<div class="main">
    <div>
        <div id="message" style="color: red"></div>
    </div>
    <div class="div-upload">
        <?php
        $form = ActiveForm::begin([
            'options' => ['enctype' => 'multipart/form-data'],
        ]);
        //echo "已有的视频地址：".$imgUrl."<br>";
        echo FileInput::widget([
            'name' => 'movie',
            'pluginOptions' => [
                'multiple' => true,
                'uploadUrl' => Url::to(['/admin/upload/qiniu_mov']),     // 异步上传的接口地址设置
                'uploadAsync' => true,
                'showPreview' => false,//去除预览功能
                'showCaption' => true,
                'showRemove' => false,
                'showUpload' => true,
                'elErrorContainer'=>'#message',
                'initialPreviewAsData'=>false,
                'maxFileSize'=>3072,
                'allowedFileExtensions'=> ["wmv","mp4", "mov","avi", "mkv"]
            ],
            'pluginEvents' => [
                "fileuploaded" => "function (event, data, id, index) {
                    appendTo(data,'mov');//触发附加的方法
               }",
            ],
        ]);
        ?>
    </div>
</div>
</div>

<?php ActiveForm::end(); ?>

<?php $this->endBody(); ?>
</body>
</html>
<script>
    var index = 0;//表格所在的位置属性
    <?php if($index>0){?>
        index = '<?=$index?>'
    <?php } ?>

    function appendTo(data,type) {
        //视频和图片都可以用这种url
        var url;
        var width = 0;
        var height = 0;

        if(type == 'img'){
            url = 'http://' + data.response.imgUrl;
            width = data.response.imgWidth;
            height = data.response.imgHeight;
        }else{
            url = 'http://' + data.response.url;
        }
        //var url = 'https://wx2.sinaimg.cn/mw690/e1ceda65ly1fqgkcv73e6j20sg0nmn0j.jpg';
        var imgEl = '<img src="'+url+'">';

        //触发关闭
        //$("#little-baby", window.parent.document).trigger("click");

        //先判断有没有附加的表格元素

        //附加图片的信息（增加tr td）
        //写入到参数列表中去（POST的参数）
        var mediaList = $("#media-list", window.parent.document);
        index = mediaList.find("tr").length;  //锁定不许添加新的内容

        if(index == 0){ //表示新建
            mediaList.append('' +
                '<tr class="first">' +
                ' <td style="display: none">' +
                '  <input name="media-mov-url[]" type="hidden" class="media-mov-url"/>' +
                ' </td>' +
                ' <td class="mov-url"><!--视频地址--></td>' +
                ' <td><div id="copymov" class="copy">插入视频</div></td>' +
                '</tr>');
            index = mediaList.find("tr").length;

            $("#little-baby-update", window.parent.document).trigger("click");
        }
        if(index == 1){
            var tr = $(mediaList.find("tr")[index-1]);
            if(type == 'mov'){  //加视频"wmv","mp4", "mov","avi", "mkv"
                //tr.find(".mov-url").html(url); //换成H5的
                var movHtml = '' +
                    '<video src="'+url+'" controls="controls">' +
                    'browser not support video tag' +
                    '</video>'
                tr.find(".mov-url").html(movHtml); //换成H5的
                tr.find(".media-mov-url").val(url);
            }else if(type == 'img'){    //加图片
                tr.find(".img-url").html(imgEl);
                tr.find(".media-img-url").val(url);
                tr.find(".media-width").val(width);
                tr.find(".media-height").val(height);
            }
        }
    }
</script>
<?php $this->endPage(); ?>



